<template>
	<div>
		<van-index-bar>
			<div v-for="(v, i) in carList" :key="i">
				<van-index-anchor :index="v.Bfirstletter" />
				<van-cell :title="item.name" v-for="(item, index) in v.arr" :key="index" @click="open(item)"></van-cell>
			</div>
		</van-index-bar>
		<van-popup v-model:show="show" position="right" :style="{height: '100vh', width: '200px'}">
			<div v-if="currItem">
				<img :src="currItem.logo" alt="">
				<h3>{{ currItem.name }}</h3>
				<p>
					产地： {{ currItem.country }}
				</p>

			</div>
		</van-popup>
	</div>
</template>


<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref } from 'vue';

interface CarItemState {
	bfirstletter: string
	country: string
	countryid: number
	id: number
	logo: string
	name: string
}

const carList = ref()
const show = ref(false)
const currItem = ref<CarItemState | null>(null)

const fetchCarData = async () => {
	const resp = await axios.get('/api/car/list')
	console.log(resp.data.data)
	carList.value = resp.data.data
}

const openPopup = () => show.value = true
const closePopup = () => show.value = false
const open = (item: CarItemState) => {
	openPopup()
	currItem.value = item
}

onMounted(() => {
	fetchCarData()
})

</script>